<template>
	<view class="details-box">
		<uni-search-bar @clear="clear" @blur="search" @confirm="search" cancelButton="none" v-model="searchValue"
			placeholder="请输入昵称或手机号">
		</uni-search-bar>
		<view class="center-box">
			<uni-collapse>
				<uni-collapse-item titleBorder="none" v-for="(item, index) in userLists" :key="index">
					<template v-slot:title>
						<view class="title-head">
							<image class="head-img"
							style="width: 100rpx;"
							mode="widthFix"
								:src="!item.avatar ? '/static/default-avatar.png' : item.avatar.external_url" alt="" />
							<view class="head-info">
								<view class="head-top">
									<view class="head-top-left">
										<text>{{ item.nick_name }}</text>
										<view v-if="item.level === 0" class="ordinary-user">
											普通用户
										</view>
										<image v-else style="width: 32px;height: 16px; background-color: #fff;border-radius: 20px; margin-left: 8px;"
											:src="levelList[item.level]" />
									</view>
									<view class="head-top-right">
										{{ item.create_time }}
									</view>
								</view>
								<view class="head-bottom">
									{{ item.mobile }}
									<image style="width: 30rpx; height: 30rpx; margin: 0 20rpx 0 40rpx;" src="@/static/copy.png"
										@click.stop="copyPhone(item.mobile)" alt="" />
									<image style="width: 30rpx; height: 30rpx; margin: 0 15rpx;"
										src="@/static/phone.png" @click.stop="makeCall(item.mobile)" alt="" />
								</view>
							</view>
						</view>
					</template>
					<view class="content-box">
						<view class="content-info">
							<text class="content-item">他的订单：{{ item.order_mun }}</text>
							<text class="content-item">直推人数：{{ item.direct_count }}</text>
							<text class="content-item">直推订单：{{ item.direct_order_count }}</text>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import * as Copy from '@/common/copy/index.js';
	export default {
		props: {
			userLists: {
				type: Array,
				default: []
			},
			search: {
				type: Function,
				default: () => {}
			},
			clear: {
				type: Function,
				default: () => {}
			},
			levelList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				searchValue: ''
			}
		},
		methods: {
			// 复制手机号
			copyPhone(str) {
				Copy.copyText(str);
				this.$success('复制成功!');
			},
			// 拨打电话
			makeCall(str) {
				uni.makePhoneCall({
					phoneNumber: str
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.details-box {
		.center-box {
			padding: 0 24rpx;

			.title-head {
				margin: 30rpx 0;
				display: flex;

				.head-img {
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.head-info {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.head-top {
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.head-top-left {
							display: flex;
							.ordinary-user {
								padding: 2rpx 8rpx;
								background-color: #fff;
								border-radius: 12px;
								border: 1px solid #bbbbbb;
								font-size: 20rpx;
								margin-left: 10rpx;
							}
						}

						.head-top-right {
							text-align: right;
							font-size: 26rpx;
						}
					}

					.head-bottom {
						font-size: 24rpx;
					}
				}
			}

			:deep(.uni-collapse-item__title) {
				padding: 24rpx 0;
			}

			:deep(.uni-collapse-item__wrap) {
				height: 100%;
			}

			.content-box {

				.content-info {
					padding: 20rpx 30rpx;
					border-radius: 24rpx;
					background-color: #fbf7ef;
					display: flex;
					flex-wrap: wrap;
					text-align: center;

					.content-item {
						flex: 0 0 50%;
						margin: 10rpx 0;
					}
				}
			}
		}
	}
</style>
